<template>
  <div class="join">
    <div
      class="content"
      v-for="(item, i) in data.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      )"
      :key="i"
    >
      <h6>{{ item.audit_time }}</h6>
      <a href="#">{{ item.audit_title }}</a>
      <br /><br />
      <a href="#">{{ item.reasons_failure }}</a>
      <!-- <a v-if="item.cfId" @click="routerTo1('/dream', item.cfId)">{{
        item.detail
      }}</a>
      <a
        v-else-if="item.recipientId"
        @click="routerTo1('/charity/persondonation', item.recipientId)"
        >{{ item.detail }}</a
      >
      <a
        v-else-if="item.id"
        @click="routerTo1('/charity/feedbackinformation', item.id)"
        >{{ item.detail }}</a
      >
      <a
        v-else
        @click="
          routerTo(
            '/detail',
            item.product.productCategory,
            item.product.productId
          )
        "
        >{{ item.detail }}</a
      > -->
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
        :total="pagetotal"
        background
        hide-on-single-page
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMyInfo, getFb } from "@/network/profile.js";
export default {
  data() {
    return {
      pagesize: 10,
      currentPage: 1,
      pagetotal: 0,
      data: [
        //   {
        //     time: "2021-7-1 12:20:32",
        //     product: { productId: "11", productCategory: "1" },
        //     detail: "有新的商品上架啦，快来抢购吧！！！"
        //   },
        //   {
        //     time: "2021-6-30 9:20:32",
        //     cfId: "1",
        //     detail: "您发布的众筹项目有新的进展啦！快来点击查看..."
        //   },
        //   {
        //     time: "2021-6-7 14:20:32",
        //     recipientId: "1009105365",
        //     detail: "您发布的募捐项目有新的进展啦！快来点击查看..."
        //   },
        //   {
        //     time: "2021-6-7 14:20:32",
        //     id: "1",
        //     detail: "亲，收到物资了吗？收到了查收无误请填写下反馈表哦！"
        //   },
        //   {
        //     time: "2021-6-7 14:20:32",
        //     id: "2",
        //     detail: "亲，收到物资了吗？收到了查收无误请填写下反馈表哦！"
        //   },
        //   {
        //     time: "2021-6-7 14:20:32",
        //     id: "3",
        //     detail: "亲，收到物资了吗？收到了查收无误请填写下反馈表哦！"
        //   },
        //   {
        //     time: "2021-6-7 14:20:32",
        //     id: "4",
        //     detail:
        //       "亲，收到物资了吗？收到了查收无误请填写下反馈表哦！亲，收到物资了吗？收到了查收无误请填写下反馈表哦！亲，收到物资了吗？收到了查收无误请填写下反馈表哦！"
        //   }
      ]
    };
  },
  mounted() {
    this.pagetotal = this.data.length;
  },
  created() {
    this.getMyInfo();
  },
  methods: {
    getMyInfo() {
      getMyInfo().then(res => {
        // console.log("myinfo");
        // console.log(res.data.infoVo);
        console.log(res.data.infoVo.username);
        getFb(res.data.infoVo.username).then(res => {
          console.log("通知");
          console.log(res);
          this.data = res;
        });
      });
    },
    // routerTo(routerPath, item, id) {
    //   console.log(id);
    //   this.$router.push({
    //     path: routerPath,
    //     query: {
    //       type: "category",
    //       id: id
    //     }
    //   });
    // },
    // routerTo1(routerPath, id) {
    //   console.log(id);
    //   this.$router.push({
    //     path: routerPath,
    //     query: {
    //       cfId: id
    //     }
    //   });
    // },
    // routerTo2(routerPath, id) {
    //   console.log(id);
    //   this.$router.push({
    //     path: routerPath,
    //     query: {
    //       id: id
    //     }
    //   });
    // },
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped>
.join {
  overflow: hidden;
  margin-left: 200px;
  min-width: 800px;
  max-height: 100vh;
  margin-right: 3vw;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.2);
}
.content {
  margin: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 0.5vh solid #999;
}
.content a {
  margin-left: 2em;
  font-size: 2.6vh;
  cursor: pointer;
}
.content h6 {
  margin: 5px;
  margin-bottom: 10px;
  font-size: 2vh;
}
.block {
  text-align: center;
}
</style>
